

<template>
  <div class="head_box">
    <div class="content_box">
      <div class="logo_box">
        <div class="toggle_menu_box">
          <img class="menu_btn" src="/image/menu.svg" />
        </div>
        <router-link to="/" title="首页"><img src="/image/logo.webp"></router-link>
        <span>·</span>
        <a href="https://www.uaa.com">
          有爱爱
        </a>
      </div>

      <!-- <form class="search_box" action="/novel/list">
        <input name="searchType" type="hidden" value="1">
        <div class="search_type">
          智能
        </div>
        <img class="search_icon" src="/image/search_icon.svg" alt="搜索" />
        <div id="search_close" class="close">
          <img src="/image/search_close_icon.svg" alt="关闭">
        </div>
        <input placeholder="搜索小说作品" name="keyword" value="" />
      </form> -->

      <div class="center_box">
        <div class="enroll_box"><a @click="showRegsitry = !showRegsitry">注册</a><b>|</b><a @click="showLogin = !showLogin">登录</a>
        </div>
        <div class="user_box"><img src="/image/user_icon.svg" /></div>
      </div>
    </div>

    <div class="head_menu_box">
      <div v-for="(item, index) in menuList" :key="index" class="item" :class="{ active: activeIndex === index }"
        @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave">
        <a class="item_link" :href="item.link" :target="item.target || '_self'" :rel="item.rel || ''">
          {{ item.name }}
        </a>

        <!-- 有子菜单时展开 -->
        <div v-if="item.children && activeIndex === index" class="item_menu_box">
          <div v-for="(child, cIndex) in item.children" :key="cIndex" class="child_item">
            <a class="item_link" :href="child.link">
              {{ child.name }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Login v-if="showLogin" />
  <Registry v-if="showRegsitry" />
</template>
<script setup>
import { menuList } from '@/utils/mock'
import Login from './Login.vue'
import Registry from './Registry.vue'

const showLogin = ref(false)
const showRegsitry = ref(false)

const activeIndex = ref(null)

const handleMouseEnter = (index) => {
  activeIndex.value = index
}

const handleMouseLeave = () => {
  activeIndex.value = null
}
</script>